<template>
  <custom-layout :isTabBar="false" navTitle="添加角色">
    <view class="add">
      <view class="form-card">
        <uni-forms ref="valiForm" :modelValue="model" :rules="rules" label-position="top">
          <uni-forms-item name="roleName" label="角色名称">
            <uni-easyinput type="text" v-model="model.roleName" placeholder="请输入角色名称" />
          </uni-forms-item>
          <uni-forms-item name="roleKey" label="权限标识">
            <uni-easyinput type="text" v-model="model.roleKey" placeholder="请输入权限标识" />
          </uni-forms-item>

          <uni-forms-item name="roleSort" label="显示顺序">
            <uni-number-box v-model="model.roleSort" />
          </uni-forms-item>
          <uni-forms-item name="status" label="角色状态">
            <uni-data-checkbox v-model="model.status" :localdata="localdata" />
          </uni-forms-item>

          <uni-forms-item name="menuIds" label="菜单权限">
            <custom-tree-select v-model="model.menuIds" :localdata="menuList" :fieldsName="fieldsName" />
          </uni-forms-item>
        </uni-forms>
        <button type="primary" @click="handleSubmit('valiForm')">提交</button>
      </view>
    </view>
  </custom-layout>
</template>

<script>
import { addRole } from "@/api/system/role";
import { getTreeMenuList } from "@/api/system/menu";
export default {
  data() {
    return {
      model: {
        status: 0,
      },
      localdata: [
        { text: "正常", value: 0 },
        { text: "停用", value: 1 },
      ],
      menuList: [],
      fieldsName: {
        key: "key",
        label: "menuName",
        children: "children",
      },
      rules: {
        roleName: {
          rules: [{ required: true, errorMessage: "请输入角色名称" }],
        },
        roleKey: {
          rules: [{ required: true, errorMessage: "请输入权限标识" }],
        },
        roleSort: {
          rules: [{ required: true, errorMessage: "请输入显示顺序" }],
        },
      },
    };
  },
  onLoad() {
    getTreeMenuList().then((res) => {
      this.menuList = res;
    });
  },
  mounted() {},
  methods: {
    async handleSubmit(refName) {
      const values = await this.$refs[refName].validate();
      this.$message.loading("提交中...", 0);
      await addRole(values);
      setTimeout(() => {
        this.$tab.navigateBack();
      }, 500);
    },
  },
};
</script>

<style lang="scss" scoped>
.add {
  width: 100%;
  min-height: 100%;
  background-color: #fff;
  box-sizing: border-box;
  padding: 16px;
}
</style>
